<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">详情</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <div width="25%" height="500px" style="margin-top: 10px">
          <el-aside>
            <div style="width: 280px; float:left;margin-left: 20px">
              <el-input @keyup.enter.native="searchConfirm" placeholder="请输入目录搜索" v-model="name">
                <i class="el-input__icon el-icon-search" slot="prefix"></i>
              </el-input>
            </div>
            <div style="margin-top: 60px;height: 450px">
              <el-tree ref="catalogTree"
                       :data=treeData
                       :props="defaultProps"
                       @node-click="handleNodeClick"
                       node-key="id">
              <span class="custom-tree-node" slot-scope="{node, data}">
                <span v-html="node.label"></span>
                <span style="color: red" v-show="data.filtered">*</span>
              </span>
              </el-tree>
            </div>
          </el-aside>
        </div>
        <el-container>
          <h3 style="text-align: center;margin: 0;" v-html="articleName"></h3>
          <div style="width: 99%;" :style="tableRowStyle">
            <el-main :style="tableRowStyle" style="width: 99%;">
              <div style="margin-left: 20px;height: 100%;background-color: #F0F8F8;">
                <div :contenteditable="contenteditable" id="context" style="margin-left: 20px" v-html="textarea">
                </div>
              </div>
            </el-main>
          </div>
          <el-footer style="text-align: right;height: 30px;">
            <el-button v-if="!contenteditable && editType === 'draft' " size="small" type="success"
                       @click="editContext">编辑
            </el-button>
            <el-button size="small" type="success" v-if="contenteditable" @click="confirm">保存</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      name: '',
      textarea: '',
      treeData: [],
      id: '',
      TextareaData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableRowStyle: '',
      contenteditable: false,
      articleName: '',
      editType: ''
    }
  },
  methods: {
    editContext() {
      this.contenteditable = true
    },
    handleNodeClick: function (treeNode) {
      let idName = '#' + treeNode.id;
      document.querySelector(idName).scrollIntoView(true);
      if (this.contenteditable && this.textarea !== $("#context").html()) {
        this.$confirm('本次编辑尚未保存, 确认放弃吗？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.confirm();
        })
      } else {
        this.contenteditable = false;
      }
    },
    searchConfirm() {
      // 先关闭所有展开节点
      for (let nodeId in this.$refs.catalogTree.store.nodesMap) {
        let treeNode = this.$refs.catalogTree.store.nodesMap[nodeId]
        this.$set(treeNode.data, 'filtered', false)
        treeNode.expanded = false
      }
      // 如果有关键字, 递归展开搜索到的节点
      if (this.name) {
        for (let cntNodeId in this.$refs.catalogTree.store.nodesMap) {
          let cntTreeNode = this.$refs.catalogTree.store.nodesMap[cntNodeId]
          if (cntTreeNode.label.includes(this.name)) {
            this.$set(cntTreeNode.data, 'filtered', true)
            this.recursiveExpandParentNode(cntTreeNode)
          }
        }
      }
    },
    recursiveExpandParentNode(treeNode) {
      if (treeNode.parent) {
        treeNode = treeNode.parent
        treeNode.expanded = true
        this.recursiveExpandParentNode(treeNode)
      }
    },
    goBack: function () {
      this.$router.push("/journalLib/Detail");
    },

    confirm: function () {
      this.textarea = $("#context").html()
      let param = new URLSearchParams()
      param.append("articleId", this.id)
      param.append("unitContent", this.textarea)
      this.axios.post('/pmph/action/journal/editConfirm', param)
        .then((response) => {
          this.$message.success(response.data)
          this.contenteditable = false
        })
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.editType = this.$route.query.editType;
    this.tableRowStyle = "height: " + (CONST.WORKSPACE_HEIGHT - 150) + "px;"
    this.axios.get("/pmph/action/journal/selectArticleCatalogTree", {
      params: {
        id: this.id
      }
    }).then((response) => {
      this.treeData = JSON.parse(response.data.catalog);
      this.textarea = response.data.textarea;
      this.articleName = response.data.name;
    })
  },
  beforeRouteLeave(to, from, next) {
    to.meta.isUseCache = true;
    next();
  }
}
</script>

<style scoped>
.el-container /deep/ h1 {
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}
</style>
